<template>
    <div>
        <table-search @search="search(1)" :isSearch="false" @reset="reset()">
            <template slot="form">
                <form-item label="">
                    <a-input v-model.trim="form.attName" placeholder="属性名称" />
                </form-item>
            </template>
            <template slot="extra" v-if="isEdit">
                <a-button class="filter-item btn_space" type="primary" icon="plus" @click="add()">新增</a-button>
            </template>
            <template slot="extra" v-else>
                <a-button type="primary" @click="deviceInfo('write')">平台配置同步</a-button>
                <a-button class="btn_space" @click="deviceInfo('read')">设备配置刷新</a-button>
            </template>
        </table-search>
        <table-list
            :loading="loading"
            :columns="columns"
            rowKey="id"
            :pagination="isEdit?pagination:false"
            :data="list"
        >
            <template slot="attType" slot-scope="{ text }">
                <field-tag
                    :value="text"
                    type="value"
                    showType="name"
                    :data="paramTypes"
                ></field-tag>
            </template>
            <template slot="dataType" slot-scope="{ text }">
                <field-tag
                    :value="text"
                    type="value"
                    showType="name"
                    :data="dataTypes"
                ></field-tag>
            </template>
            <template slot="action" slot-scope="{ text }">
                <a-button size="small" type="primary" v-if="text.readFlag!=1" @click="update(text)">编辑</a-button>
                <a-button size="small" v-if="isEdit" class="btn_space" @click="remove(text)">删除</a-button>
            </template>
        </table-list>

        <template v-if="isshow">
            <property-info :property="property" :deviceCode="deviceCode" :productCode="proCode" :info="showInfo" @cancel="isshow = false" @submit="updateList" />
        </template>
    </div>
</template>

<script>
import table from '@/mixins/table';
import { columns,columnAction } from './columns';
import PropertyInfo from './components/info';
import { paramTypes, dataTypes } from '@/views/product/common/types';
import { remoteList, deleteInfo } from '@/api/product/property';
import { remoteDevicePropertyList,remoteReadDeviceConfig, remoteWriteDeviceInfo} from '@/api/device';

export default {
    name: 'Property',
    mixins: [table],
    props: {
        property: [],
        proCode: String,
        deviceCode: {
            type:String || null,
            default:''
        },
        isEdit:{
            type:Boolean,
            default:true
        },
        info:{
            type:Object,
            default:()=>{}
        },
        isAction:{
            type:Boolean,
            default:true
        }
    },
    components: {
        PropertyInfo
    },
    data() {
        let originForm = {
            attName: ''
        };
        return {
            paramTypes,
            originForm,
            form:{
                ...originForm
            },
            dataTypes,
            columnAction,
            columns,
            isshow: false,
            showInfo: {}
        };
    },
    created(){
        if(this.isAction){
            if(this.isEdit){
                this.columns = [...this.columns,...this.columnAction]
            }else{
                this.columns = [
                    ...this.columns,{
                        title: '属性值',
                        dataIndex: 'attValue',
                    },...this.columnAction]
            }
        }else{
            if(this.isEdit){
                this.columns = [...this.columns]
            }else{
                this.columns = [
                    ...this.columns,{
                        title: '属性值',
                        dataIndex: 'attValue',
                    }]
            }
        }
        this.search(1)
    },
    methods: {
        async search(page) {
            try {
                this.loading = true;
                this.form.pdtCode = this.proCode;
                this.form.deviceCode = this.deviceCode;
                if (page) {
                    this.form.page = page;
                }
                this.list = [];
                let res = null;
                if(this.isEdit){
                    res = await remoteList(this.form);
                    let { list, total } = res.data;
                    this.list = list;
                    this.total = total;
                }else{
                    res = await remoteDevicePropertyList(this.form)
                    this.list = res.data;
                    this.total = 0
                }
            } finally {
                this.loading = false;
            }
        },
        updateList() {
            this.isshow = false;
            this.showInfo = {};
            this.search(1);
        },
        //
        deviceInfo(type){
            let {pdtCode,deviceCode} = this.info;
            console.log(this.info)
            let message = type=="write"?'确定将平台数据更新到设备中吗？':'确定将设备数据读取到平台中吗？'
            this.$confirm({
                title: '提示',
                content: message,
                okText: '确定',
                cancelText: '取消',
                onOk: async () => {
                    this.loading = true;
                    try{
                        if(type=='write'){
                            await remoteWriteDeviceInfo({pdtCode,deviceCode})
                        }else{
                            await remoteReadDeviceConfig({pdtCode,deviceCode})
                        }
                        this.$message.success('操作成功!');
                        this.search(1);
                    }finally{
                        this.loading = false;
                    }
                },
                onCancel() {}
            });
        },
        //新增
        add() {
            this.isshow = true;
            this.showInfo = {};
        },
        //修改
        update(item) {
            this.isshow = true;
            this.showInfo = item;
        },
        //删除
        remove(item) {
            this.$confirm({
                title: '提示',
                content: '确定要删除该属性？',
                okText: '确定',
                cancelText: '取消',
                onOk: async () => {
                    await deleteInfo({ids:[item.id]});
                    this.$message.success('删除成功!');
                    this.search(1);
                },
                onCancel() {}
            });
        }
    }
};
</script>
